<template>
  <view v-for="(item,index) in bills" :key="index">
    <view class="d-flex">
      <view class="flex-1 d-flex">
        <image style="height: 20px;" mode="heightFix" src="/static/assets/images/huo.png"></image>
        <view style="margin-left: 0.4rem;">{{item.name}}</view>
      </view>
      <view @click="toRouter('/pages/custom-skin/index', `name=${item.name}&type=${item.value}`)" class="d-flex align-items-center">
        <view style="color: #666; margin-right: 0.1rem; font-size: 0.8rem;">更多</view>
        <wd-icon color="#999" name="arrow-right"></wd-icon>
      </view>
    </view>
    <wd-gap height="0.5rem"></wd-gap>
    <Waterfalls @imageClick="wapperClick" :column="3" :value="item.bills"></Waterfalls>
    <view class="billboard">
      <!-- <image @click="wapperClick(v)" v-for="(v,index) in item.bills" :key="index" style="width: 100%; border-radius: 0.5rem;" mode="widthFix" :src="v.url"></image> -->
    </view>
    <wd-gap height="1rem"></wd-gap>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { toRouter } from '@/hooks/utils'
import Waterfalls from "@/components/custom-waterfalls-flow.vue";
import { onLoad, onPullDownRefresh, onShow, onReachBottom } from "@dcloudio/uni-app";
const page = ref(1), isPullDownRefresh = ref(false);
const bills = ref([
  {
    name: '主题榜',
    value: 'theme',
    bills: []
  },
  {
    name: '微信QQ皮肤榜',
    value: 'qq-skin-billboard',
    bills: []
  },
  {
    name: '壁纸榜',
    value: 'wallpaper-billboard',
    bills: []
  },
  {
    name: '3D壁纸榜',
    value: '3d-billboard',
    bills: []
  }
])
const itemIndex = ref(1)
const items = ref([
  {
    name: '最新',
    index: 1
  },
  {
    name: '抖音',
    index: 2
  },
  {
    name: '最新',
    index: 3
  },
  {
    name: '分类',
    index: 4
  }
])
const initList = () => {
  uni.showToast({
    title: '加载中',
    icon: 'loading',
    duration: 1500
  })
  uni.request({
    url: `/api/wallpaper/oss/page?page=1&size=10&type=theme`
  }).then(res => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    bills.value[0].bills = res.data.data
    uni.hideToast()
  })
  uni.request({
    url: `/api/wallpaper/oss/page?page=1&size=10&type=qq-skin-billboard`
  }).then(res => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    bills.value[1].bills = res.data.data
    uni.hideToast()
  })
  uni.request({
    url: `/api/wallpaper/oss/page?page=1&size=10&type=wallpaper-billboard`
  }).then(res => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    bills.value[2].bills = res.data.data
    uni.hideToast()
  })
  uni.request({
    url: `/api/wallpaper/oss/page?page=1&size=10&type=3d-billboard`
  }).then(res => {
    res.data.data.forEach((item) => {
      item.image = item.url;
    });
    bills.value[3].bills = res.data.data
    uni.hideToast()
  })
}
onMounted(() => {
  initList()
})
const wapperClick = (item) => {
  toRouter("/pages/preview/index", `name=${item.name}&url=${item.url}&category=${item.category}&association=${item.association}`);
}
</script>

<style scoped lang="scss">
.billboard{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
</style>